<template>
  <div class="app-container">
    <el-row>
      <div class="remark">
        <div>统计范围：当天8：00 —— 次日8：00</div>
        <div class="tooltip" style="background-color: blue"></div>
        <div>理论</div>
        <div class="tooltip" style="background-color: green"></div>
        <div>生产/实际</div>
        <div class="tooltip" style="background-color: gray"></div>
        <div>休息</div>
        <div class="tooltip" style="background-color: orange"></div>
        <div>故障</div>
      </div>
      
      <!-- <el-col></el-col>
      <el-col>
        <div></div>
      </el-col>
      <el-col>理论</el-col>
      <el-col>
        <div></div>
      </el-col>
      <el-col>生产/实际</el-col>
      <el-col>
        <div></div>
      </el-col>
      <el-col>休息</el-col>
      <el-col>
        <div></div>
      </el-col>
      <el-col>故障</el-col> -->
    </el-row>
    <el-row class="page-title">
      宜宾凯翼工厂生产实况概览
    </el-row>
    <el-row :gutter="20" >
      <el-col :span="8" v-for="item in list" :key="item.workshopNo">
        <el-card class="box-card" :body-style="{ padding: '10px' }">
          <el-row class="top">
            <el-col :span="2" class="sign">
              <div :style="{backgroundColor: colorList[item.status]}"></div>
            </el-col>
            <el-col :span="5" class="top-title">
              {{item.workshopNameC}}
            </el-col>
            <el-col :span="4" v-for="(ele, index) in item.lineList" :key="index">
              <el-row>
                <el-col :span="12" class="signal">
                  <div :style="{backgroundColor: colorList[ele.status]}" :class="animateList[ele.status]"></div>
                </el-col>
                <el-col :span="12" class="signal-item">
                  <div>{{ele.name}}</div>
                </el-col>
              </el-row>
            </el-col>           
          </el-row>
          <el-row class="middle" :gutter="40">
            <el-col :span="12">
              <el-row class="middle-title">可动率</el-row>
              <el-row>
                <chart class="middle-chart" :options="item.guageList" :auto-resize="true"></chart>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row class="middle-title">日运行累计</el-row>
              <el-row>
                <chart class="middle-chart" :options="item.pieList" :auto-resize="true"></chart>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="bottom" :gutter="10">
            <el-col :span="8" class="bottom-title">平均JPH</el-col>
            <el-col :span="16">
              <chart class="bottom-chart" :options="item.barList" :auto-resize="true"></chart>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    
  </div>
</template>
<style lang="scss" scoped>
// 动画效果
@keyframes mymove {
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}
@media only screen and (min-width: 1024px) and (max-width: 1400px) {
  .signal-item {
    font-size: 14px !important;
  }
}
@media only screen and (min-width: 1401px){
  .signal-item {
    font-size: 18px !important;
  }
}
.page-title {
  margin-bottom: 15px;
  text-align: center;
  font-size: 25px;
  font: 1000;
}
.box-card {
   margin-bottom: 20px;
  .top {
    margin: 10px;
    .sign {
      div {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: green;
      }
    }
    .top-title {
      height: 25px;
      line-height: 25px;
      font-weight: 800;
    }
    .signal {
      div {
        float: right;
        width: 80%;
        margin: 5px auto;
        height: 15px;
        margin-top: 5px;
      }
      .animate-quick {
        animation:mymove 1s infinite;
        -webkit-animation:mymove 1s infinite;
      }
      .animate-slow {
        animation:mymove 3s infinite;
        -webkit-animation:mymove 3s infinite;
      }
      
    }
    .signal-item {
      height: 25px;
      line-height: 25px;
    }
  }
  .middle {
    margin: 10px;
    .middle-title {
      text-align: center;
      height: 25px;
      line-height: 25px;
    }
    .middle-chart {
      width: 100%;
      height: 200px;
      // padding: 10px 0;
      // box-sizing: border-box;
    }
  }
  .bottom {
    margin: 10px;
    border-top: 1px solid #000;
    .bottom-title {
      height: 40px;
      line-height: 40px;
      // margin: 10px;
      text-align: center;
    }
    .bottom-chart {
      width: 80%;
      height: 40px;
    }
  }
}
.remark {
  float: right;
  overflow: hidden;
  div {
    float: left;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
  }
  .tooltip {
    height: 14px;
    width: 20px;
    margin-top:3px;
    margin-right: 5px;
  }
}
</style>
<script>
import findInList from '@/utils/listutils'
import { fetchLineData } from '@/api/bdc/line-monitor'
export default {
  name: "LineMonitor",
  data() {
    return {
      // 基础数据
      factoryData: [],
      // 图表显示数据
      list: [],
      // test
      testOptions: {},
      testOptions1: {},
      testOptions2: {},
      // 定时器定时刷新
      set: null,
      // 状态值颜色列表
      colorList: {
        real: 'blue',
        auto: 'green',
        standBy: 'orange',
        rest: 'gray'
      },
      // 状态值动画列表
      animateList: {
        real: '',
        auto: 'animate-slow',
        standBy: 'animate-quick',
        rest: ''
      }
    };
  },
  created() {
    this.getLineData()
    // test
    // this.factoryData = [
    //   {
    //     workshopId: 5,
    //     workshopName: "冲压车间",
    //     lineList: [
    //       { name: '1线', status: 'auto'}
    //     ],
    //     rateList: [50],
    //     completeList: [
    //       { value: 335, name: "正常" },
    //       { value: 310, name: "故障" }
    //     ],
    //     jphList: [120, 80]
    //   },
    //   {
    //     workshopId: 1,
    //     workshopName: "焊装车间",
    //     lineList: [
    //       { name: '1线', status: 'auto'}
    //     ],
    //     rateList: [50, 60],
    //     completeList: [
    //       { value: 335, name: "正常" },
    //       { value: 310, name: "故障" }
    //     ],
    //     jphList: [120, 80]
    //   },
    //   {
    //     workshopId: 2,
    //     workshopName: "涂装车间",
    //     lineList: [
    //       { name: '1线', status: 'auto'}
    //     ],
    //     rateList: [20, 50, 60],
    //     completeList: [
    //       { value: 335, name: "正常" },
    //       { value: 310, name: "故障" }
    //     ],
    //     jphList: [120, 80]
    //   },
    //   {
    //     workshopId: 3,
    //     workshopName: "总装车间",
    //     lineList: [
    //       { name: '1线', status: 'auto'}
    //     ],
    //     rateList: [20, 50, 60, 80],
    //     completeList: [
    //       { value: 335, name: "正常" },
    //       { value: 310, name: "故障" }
    //     ],
    //     jphList: [120, 80]
    //   },
    //   {
    //     workshopId: 4,
    //     workshopName: "PACK",
    //     lineList: [
    //       { name: '1线', status: 'auto'}
    //     ],
    //     rateList: [50],
    //     completeList: [
    //       { value: 335, name: "正常" },
    //       { value: 310, name: "故障" }
    //     ],
    //     jphList: [120, 80]
    //   },
    //   {
    //     workshopId: 6,
    //     workshopName: "BDC",
    //     rateList: [],
    //     completeList: [
    //       { value: 335, name: "正常" },
    //       { value: 310, name: "故障" }
    //     ],
    //     jphList: [120, 80]
    //   }
    // ];
  },
  mounted() {
    // test
    // this.list = []
    // for(const i of this.factoryData) {
    //   // test
    //   i.jphList = [Math.floor(120 * Math.random()), Math.floor(80 * Math.random())]
    //   const item = {
    //     id: i.workshopId,
    //     name: i.workshopName,
    //     lineList: i.lineList,
    //     guageList: this.formatGuageOptionData(i.rateList),
    //     pieList: this.formatPieOptionData(i.completeList),
    //     barList: this.formatBarOptionData(i.jphList),
    //   }
    //   this.list.push(item)
    // }
    // // console.log('list', this.list)
    // this.set = setInterval(
    //   () => {
    //     this.list = []
    //     for(const i of this.factoryData) {
    //       // test
    //       i.jphList = [Math.floor(120 * Math.random()), Math.floor(80 * Math.random())]
    //       const item = {
    //         id: i.workshopId,
    //         name: i.workshopName,
    //         lineList: i.lineList,
    //         guageList: this.formatGuageOptionData(i.rateList),
    //         pieList: this.formatPieOptionData(i.completeList),
    //         barList: this.formatBarOptionData(i.jphList),
    //       }
    //       this.list.push(item)
    //     }
    //   }, 10000
    // )
  },
  methods: {
    // test
    randomColor() {
      const colorArr = ["blue", "green", "orange", "gray"];
      return colorArr[Math.floor(Math.random() * 3)];
    },
    getLineData() {
      fetchLineData().then(res => {
        this.factoryData = res.data
        console.log('factoryData', this.factoryData)
        this.formatChartList()
      })
    },
    formatChartList() {
      this.list = []
      for(const i of this.factoryData) {
        const item = {
          workshopNo: i.workshopNo,
          workshopNameC: i.workshopNameC,
          status: this.getWorkshopStatus(i.lineList),
          lineList: i.lineList.map(a => {
            // 产线名称截取
            a.name = a.lineNameC.slice(a.lineNameC.length - 2)
            // 状态格式化
            if (a.lineState === '') {
              a.status = 'auto'
            } else {
              a.status = a.lineState
            }
            return a
          }),
          guageList: this.formatGuageOptionData(i.lineList),
          pieList: this.formatPieOptionData(i.dayRunAccumulate),
          barList: this.formatBarOptionData(i.jphList),
        }
        this.list.push(item)
      }
      console.log('list', this.list)
    },
    getWorkshopStatus(lineList) {
      for (const i of lineList) {
        if (i.lineState === 'standBy') {
          return 'standBy'
          break
        }
      }
      return 'auto'
    },
    formatGuageOptionData(list) {
      let option = {
        grid: {
          show: false,
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        },
        series: []
      };
      const item = {
        name: "开动率",
        type: "gauge",
        center: ["50%", "25%"],
        radius: "100%",
        startAngle: 180,
        endAngle: 0,
        detail: {},
        data: [{ value: 50 }],
        axisLine: {
          show: true,
          // 属性lineStyle控制线条样式
          lineStyle: {
            width: 15,
            color: [[0.85, "red"], [1, "green"]]
          }
        },
        axisLabel: {
          show: false
        },
        // 控制数据显示样式
        detail: {
          show: true,
          offsetCenter: ["0", "50%"],
          formatter: "{value}%",
          color: "#000",
          fontSize: 14
        },
        itemStyle: {
          color: "#000"
        },
        markPoint: {
          label: {
            show: false
          }
        },
        pointer: {
          width: 8
        }
      };
      switch (list.length) {
        case 0:
          option = null;
          break;
        case 1:
          for (let i = 0; i < list.length; i++) {
            const ele = Object.assign({}, item);
            // 仪表盘宽度, 中心
            ele.center = ["50%", "50%"]
            ele.radius = "100%";
            ele.data = [{ value: list[i].lineUptimeRate }];
            // 仪表盘指针宽度
            ele.pointer.width = 8
            // 仪表盘刻度域宽度
            ele.axisLine.lineStyle.width = 15
            option.series.push(ele);
          }
          break;
        case 2:
          for (let i = 0; i < list.length; i++) {
            const ele = Object.assign({}, item);
            // 仪表盘宽度, 中心
            ele.radius = "60%";
            ele.data = [{ value: list[i].lineUptimeRate }];
            if (i === 0) {
              ele.center = ["50%", "30%"];
            } else {
              ele.center = ["50%", "80%"];
            }
            // 仪表盘指针宽度
            ele.pointer.width = 6
            // 仪表盘刻度域宽度
            ele.axisLine.lineStyle.width = 10
            option.series.push(ele);
          }
          break;
        case 3:
          for (let i = 0; i < list.length; i++) {
            const ele = Object.assign({}, item);
            // 仪表盘宽度, 中心
            ele.radius = "45%";
            ele.data = [{ value: list[i].lineUptimeRate }];
            if (i === 0) {
              ele.center = ["25%", "25%"];
            } else if (i === 1) {
              ele.center = ["25%", "75%"];
            } else {
              ele.center = ["75%", "25%"];
            }
            // 仪表盘指针宽度
            ele.pointer.width = 4
            // 仪表盘刻度域宽度
            ele.axisLine.lineStyle.width = 8
            option.series.push(ele);
          }
          break;
        case 4:
          for (let i = 0; i < list.length; i++) {
            const ele = Object.assign({}, item);
            // 仪表盘宽度, 中心
            ele.radius = "45%";
            ele.data = [{ value: list[i].lineUptimeRate }];
            if (i === 0) {
              ele.center = ["25%", "25%"];
            } else if (i === 1) {
              ele.center = ["25%", "75%"];
            } else if (i === 2) {
              ele.center = ["75%", "25%"];
            } else {
              ele.center = ["75%", "75%"];
            }
            // 仪表盘指针宽度
            ele.pointer.width = 4
            // 仪表盘刻度域宽度
            ele.axisLine.lineStyle.width = 8
            option.series.push(ele);
          }
          break;
        default:
          option = null;
          break;
      }
      return option;
    },
    formatPieOptionData(data) {
      let newData
      if (parseInt(data.fault) === 0) {
        newData = [
          { value: data.auto, name: "正常" }
        ]
      } else {
        newData = [
          { value: data.auto, name: "正常" },
          { value: data.fault, name: "故障" }
        ]
      }
      return {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // legend: {
        //     orient: 'vertical',
        //     x: 'left',
        //     data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        // },
        series: [
          {
            name: "日运行累计",
            type: "pie",
            radius: ["60%", "100%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: newData.length > 1 ? newData[1].value + '/' + newData[0].value + '\n(分钟)' : newData[0].value + '\n(分钟)',
                color: "#000",
                fontSize: 20
              }
              // 注意这是hover事件响应效果，这里不需要
              // emphasis: {
              //   show: true,
              //   textStyle: {
              //     fontSize: "30",
              //     fontWeight: "bold"
              //   }
              // }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            animation: false,
            data: newData,
            itemStyle: {
              // emphasis: {
              //   shadowBlur: 10,
              //   shadowOffsetX: 0,
              //   shadowColor: "rgba(0, 0, 0, 0.5)"
              // },
              normal: {
                color: function(params) {
                  //自定义颜色
                  const colorList = [
                    "green",
                    "red"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      };
    },
    formatBarOptionData(list) {
      return {
        grid: {
          show: false,
          left: 0,
          right: 30,
          top: 10,
          bottom: 10
        },
        xAxis: {
          type: "value",
          show: false
        },
        yAxis: {
          type: "category",
          data: ["理论JPH", "实际JPH"],
          show: false
        },
        series: [
          {
            data: list,
            type: "bar",
            color: ['blue', 'green'],
            // 显示点值
            label: {
              show: true,
              position: "right"
            },
            itemStyle: {
              normal: {
                color: (params) => {
                  if (params.dataIndex === 0) {
                    return 'blue';
                  } else {
                    return 'green';
                  }
                },
                // lineStyle: {
                //   color: '#000',
                //   width: 2
                // },
                // 显示点值
                label: {
                  show: true,
                  position: 'right'
                }
              }
            }
          }
        ]
      };
    },
  }
};
</script>